<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <!-- 筛选条件（请购人（模糊查询），系统单据编号，u8单据编号，需求日期（开始，结束），采购类型，公司部门（级联选择框），待我审批 -->
        <el-form-item>
          <el-input v-model="filters.psnname" placeholder="请购人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="filters.orderNum" placeholder="系统单据编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="filters.needDayStart"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="需求开始日期"
          ></el-date-picker>-
          <el-date-picker
            v-model="filters.needDayStop"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="需求结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.buyType" placeholder="采购类型">
            <el-option label="紧急采购" value="0"></el-option>
            <el-option label="零星采购" value="1"></el-option>
            <el-option label="合同采购" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <companyDepart @getCompanyDepart="getCompanyDepart"></companyDepart>
        </el-form-item>
        <!-- <el-form-item>
          <el-select
            v-model="filters.unitnameId"
            filterable
            placeholder="请选择公司"
            @change="changeCompany"
          >
            <el-option
              v-for="item in companyList"
              :key="item.pkCorp"
              :label="item.unitname"
              :value="item.pkCorp"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.deptnameId" filterable placeholder="请选择部门">
            <el-option
              v-for="item in departList"
              :key="item.pkDeptdoc"
              :label="item.deptname"
              :value="item.pkDeptdoc"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="待我审批：">
          <el-select v-model="filters.nowUserAudit" placeholder="是否待自己审批">
            <el-option v-for="item in isMeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="单据状态：">
          <el-select v-model="filters.type" placeholder="单据状态">
            <el-option v-for="item in billState" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getList">查询</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>-->
      </el-form>
    </el-col>
    <!-- <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="delList">批量删除</el-button>
        </el-form-item>
      </el-form>
    </el-col>-->
    <!--列表-->
    <el-table
      :data="formList"
      highlight-current-row
      v-loading="listLoading"
      @selection-change="selsChange"
      style="width: 100%;"
      height="50vh"
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column prop="orderNum" label="系统单据编号" align="center"></el-table-column>
      <!-- <el-table-column prop="vordercode" label="u8单据编号" align="center"></el-table-column> -->
      <el-table-column prop="uploadDay" label="请购日期" align="center"></el-table-column>
      <el-table-column prop="needDay" label="需求日期" align="center"></el-table-column>
      <!-- <el-table-column prop="custname" label="产品名称规格型号" ></el-table-column> -->
      <el-table-column prop="buyType" label="采购类型" :formatter="formatterBuyType"></el-table-column>
      <el-table-column prop="unitname" label="公司"></el-table-column>
      <el-table-column prop="deptname" label="部门"></el-table-column>
      <el-table-column prop="psnname" label="请购人"></el-table-column>
      <el-table-column prop="singlePerson" label="制单人"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
          <!-- <el-button type="danger" size="small" @click="deleteItem(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> -->
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="page.pageSize"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>
  </section>
</template>

<script>
import util from "../../common/js/util";
import { wlcSysInquiryRemove, wlcSysInquirySelectOkLast } from "../../api/api";
import {
  companyList,
  omJobSelectBdDeptdoc,
  omJobSelectBdCorp
} from "../../api/baseSetting";
import companyDepart from "../components/companyDepart";
export default {
  components: {
    companyDepart
  },
  data() {
    return {
      filters: {
        psnname: "",
        orderNum: "",
        needDayStart: "",
        needDayStop: "",
        custname: "",
        buyType: "",
        unitnameId: "",
        deptnameId: "",
        type: 5
        // nowUserAudit: "1"
      },
      formList: [],
      total: 0,
      page: {
        page: 1,
        pageSize: 10
      },
      listLoading: false,
      sels: [], //列表选中列
      //是否自己审批的
      isMeList: [
        {
          name: "待我审批",
          id: "1"
        },
        {
          name: "全部",
          id: "0"
        }
      ],
      //单据状态
      billState: [
        {
          name: "审核通过",
          id: 5
        },
        {
          name: "已处理",
          id: 9
        }
      ],
      companyList: [],
      departList: []
    };
  },
  methods: {
    getCompanyDepart(e){
      this.filters.unitnameId = e[2].value;
      this.filters.deptnameId = e[3].pkDeptdoc;
    },
    //格式化采购类型
    formatterBuyType(e) {
      let buyType = e.buyType;
      let text = "";
      switch (buyType) {
        case 0:
          text = "紧急采购";
          break;
        case 1:
          text = "零星采购";
          break;
        case 2:
          text = "合同采购";
          break;
        default:
          text = "";
      }
      return text;
    },
    //跳转详情页
    handleEdit(index, row) {
      this.$router.push({
        path: "approvalOrderDetail",
        query: {
          id: row.id,
          buyType: row.buyType
        }
      });
    },
    //公司列表
    getCompany() {
      omJobSelectBdCorp({}).then(res => {
        this.companyList = res;
      });
    },
    //改变公司
    changeCompany(e) {
      this.filters.deptnameId = "";
      this.getDepart(e);
    },
    //获取部门列表
    getDepart(pkCorp) {
      omJobSelectBdDeptdoc({ pkCorp }).then(res => {
        this.departList = res;
      });
    },
    //批量删除
    delList() {
      let arr = [];
      for (let i = 0; i < this.sels.length; i++) {
        let obj = {
          id: this.sels[i].id
        };
        arr.push(obj);
      }
      this.handleDel(arr);
    },
    //单独删除
    deleteItem(item) {
      let arr = [];
      let obj = {
        id: item.id
      };
      arr.push(obj);
      this.handleDel(arr);
    },
    //性别显示转换
    formatSex: function(row, column) {
      return row.sex == 1 ? "男" : row.sex == 0 ? "女" : "未知";
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getList();
    },
    //获取列表
    getList() {
      let para = Object.assign({}, this.filters);
      para.page = this.page;
      this.listLoading = true;
      wlcSysInquirySelectOkLast(para).then(res => {
        this.total = res.total;
        this.formList = res.records;
        this.listLoading = false;
      });
    },
    //删除
    handleDel: function(arr) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          wlcSysInquiryRemove(arr).then(res => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function() {
      var ids = this.sels.map(item => item.id).toString();
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = { ids: ids };
          batchRemoveUser(para).then(res => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getList();
          });
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.getList();
    // this.getCompany();
  }
};
</script>
<style lang="less" scoped>
</style>
